<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    // "navigationStyle": "custom",
    "navigationBarTitleText": "注册",
  },
}
</route>

<template>
  <wd-navbar
    left-text=""
    right-text="登录"
    left-arrow
    @click-left="handleClickLeft"
    @click-right="handleClickRight"
    class="mt-2"
  ></wd-navbar>

  <p class="titles">注册</p>

  <wd-form ref="form" :model="model" class="mt-5">
    <wd-cell-group border class="pl-5 pr-5">
      <wd-input
        label-width="100px"
        prop="value1"
        clearable
        v-model="model.value1"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <view style="display: flex">
        <wd-input
          label-width="100px"
          prop="value2"
          clearable
          v-model="model.value2"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          class="mt-2"
        />
        <span
          class="text-center pt-5 ml-3"
          style="color: #16c2a3; font-size: 15px; cursor: pointer"
          @click="handleGetCode"
          :style="{
            color: countDown > 0 ? '#ccc' : '#16c2a3',
            cursor: countDown > 0 ? 'not-allowed' : 'pointer',
          }"
        >
          {{ countDown > 0 ? `${countDown}s后重新获取` : "获取验证码" }}
        </span>
      </view>
      <wd-input
        label-width="100px"
        prop="value1"
        clearable
        v-model="model.value3"
        placeholder="请输入新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
        class="mt-3"
      />
    </wd-cell-group>
    <wd-checkbox v-model="value" checked-color="#16C2A3" class="pl-5 mt-4">
      <span>
        我已同意 <text class="text-green-500">用户协议</text> 及
        <text class="text-green-500">隐私协议</text>
      </span>
    </wd-checkbox>
    <view class="footer">
      <wd-button
        type="success"
        size="large"
        @click="handleSubmit"
        block
        class="mt-1 pl-5 pr-5"
        >注册</wd-button
      >
      <p class="fs-10 text-center mt-3">忘记密码?</p>
    </view>
  </wd-form>

  <view class="mt-50">
    <wd-divider content-position="center">第三方登录</wd-divider>
    <img src="@/static/app/icons/QQ.svg" alt="" class="w-10 h-10 ml-42" />
  </view>
</template>

<script setup lang="ts">
import { useToast } from "wot-design-uni";
import WdDivider from "wot-design-uni/components/wd-divider/wd-divider.vue";
import { reactive, ref } from "vue";

function handleClickRight() {
  uni.navigateTo({
    url: "./login",
  });
}
function handleClickLeft() {
  uni.navigateBack({
    delta: 1,
  });
}

// const { success: showSuccess } = useToast();

const model = reactive<{
  value1: string;
  value2: string;
  value3: string;
}>({
  value1: "",
  value2: "",
  value3: "",
});
const form = ref();

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      // if (valid) {
      //   showSuccess({
      //     msg: "校验通过",
      //   });
      // }
    })
    .catch((error) => {
      console.log(error, "error");
    });
}

// 复选框
const value = ref<boolean>(true);

// 获取验证码倒计时
const countDown = ref(0);
const timer = ref(null);

// 四位数验证码
const generateVerificationCode = () => {
  const code = Math.floor(1000 + Math.random() * 9000);
  return code.toString();
};

// 处理获取验证码
const handleGetCode = () => {
  // 如果正在倒计时，则不执行
  if (countDown.value > 0) return;

  // 生成并输出验证码到控制台
  const verificationCode = generateVerificationCode();
  console.log("验证码：", verificationCode);

  // 设置倒计时时间（60秒）
  countDown.value = 60;

  // 启动倒计时
  timer.value = setInterval(() => {
    countDown.value--;
    // 倒计时结束
    if (countDown.value <= 0) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
};

// 组件卸载时清除定时器，防止内存泄漏
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style>
.titles {
  font-size: 28px;
  margin-top: 20px;
  margin-left: 15px;
}
p {
  color: #848484;
}
.footer {
  padding: 12px;
}
</style>
